<template>
<view class="index_class">
    <view class="order-deta">
        <view class="order-info-time">
            <view>
                <view>{{ orderInfo.order_zt }}</view>
                <view v-if="orderInfo.filter == 1">{{ $t('剩余') }}{{ orderInfo.sytime }}{{ $t('关闭') }}</view>
                <view v-if="orderInfo.filter == 3">{{ $t('剩余') }}{{ orderInfo.sysh_time }}{{ $t('自动收货') }}</view>
            </view>
            <image :src="imgSTATICURL+'images/img/addr-bao.png'"/>
        </view>

        <view class="phone" v-if="orderInfo.filter == 3"
              @click="getnav('/pagesB/my/logistics?psnum='+orderInfo.wulius.psnum+'&kdniao_code='+orderInfo.wulius.kdniao_code+'&logistics_name='+orderInfo.wulius.log_name+'&telephone='+orderInfo.telephone)">
            <view style="width:20%;display:flex;justify-content:center">
                <i class="iconfont icon_e65e icon-bgc"></i>
            </view>
            <view class="tap_address">
                <view class="addrin">
                    {{ $t('订单已发货') }}{{ orderInfo.wulius.log_name }}，{{ $t('快递单号') }}{{ orderInfo.wulius.psnum }}，{{ $t('联系电话') }}{{ orderInfo.wulius.telephone }}
                </view>
                <text style="color:#ccc">{{ orderInfo.fh_time }}</text>
            </view>
            <i class="iconfont icon_e60c" style="width:7%;font-size:40upx;color:#ccc"></i>
        </view>


        <!-- 用户选择的邮寄信息 -->
        <view class="phone" v-if="orderInfo.province">
            <view style="width:20%;display:flex;justify-content:center">
                <i class="iconfont icon_e712 icon-bgc"></i>
            </view>
            <view class="tap_address">
                <view>
                    {{ orderInfo.contacts }}
                    <text style="padding-left:30upx">{{ orderInfo.telephone }}</text>
                </view>
                <text>{{ orderInfo.province + orderInfo.city + orderInfo.area + orderInfo.address }}</text>
            </view>
        </view>

        <!-- 用户选择的自提信息 -->
        <view class="self_info" v-else>
            <view class="self_title">用户信息</view>
            <view class="self_userinfo">
                <view class="self_username">
                    <i class="iconfont icon_e655"></i>
                    <text>{{ orderInfo.contacts }}</text>
                </view>
                <view class="self_username">
                    <i class="iconfont icon_e682"></i>
                    <text>{{ orderInfo.telephone }}</text>
                </view>
            </view>
            <view class="self_title">自提信息</view>
            <view class="zt-wrap"
                  style="border-bottom: 1px solid #efefef; display: flex;justify-content: space-between; align-items: center;  padding: 20px;font-size: 12px; color: #333333;margin-top: -15px;"
                  v-if="orderInfo.shop_storestaff_info">
                <view>
                    <view class="zt-row1">{{ orderInfo.shop_storestaff_info['name'] }} /
                        {{ orderInfo.shop_storestaff_info['contact'] }}
                        {{ orderInfo.shop_storestaff_info['phone'] }}
                    </view>
                    <view class="zt-row2">
                        {{ orderInfo.shop_storestaff_info['province'] }}
                        {{ orderInfo.shop_storestaff_info['city']}}
                        {{ orderInfo.shop_storestaff_info['area'] }}
                        {{ orderInfo.shop_storestaff_info['detail'] }}
                    </view>
                </view>
                <view style="text-underline: #999999;color: #999999;" @click="copyAddress">复制地址</view>

            </view>

            <!--				<view class="self_order_list" @click="self_order()">-->
            <!--					<view class="self_juan">-->
            <!--						<text class="order_list_left_title">{{$t('查看自提点')}}</text>-->
            <!--					</view>-->
            <!--					<i class="iconfont icon_e60c order_color"></i>-->
            <!--				</view>-->
        </view>


        <view class="fresh_list">
            <view class="order_bottom">
                <view class="bottom_top">
                    <view>
                        <i class="iconfont cart_e61d"></i>
                        {{ orderInfo.shop_name }}
                    </view>
                    <i class="iconfont order_all_right"></i>
                </view>
                <view class="bottom_img" v-for="(item2,index) in orderInfo.goodsinfo" :key="index">
                    <image :src="item2.thumb_url"
                           @click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)"/>

                    <view style="padding:0 40upx 0 20upx;flex:1">
                        <view class="introduce" @click="getnav('/pagesC/goods/goodsDetails?id='+item2.goods_id)">
                            {{ item2.goods_name }}
                        </view>
                        <view class="arrt-str">{{ item2.goods_attr_str }}</view>
                    </view>
                    <view style="font-size:24upx;text-align:right">
                        ¥{{ item2.real_price }}

                        <view style="text-align:right;color:#999">x{{ item2.goods_num }}</view>

                        <view class="shou_sure"
                              v-if="orderInfo.filter == 2  || orderInfo.filter == 3 || orderInfo.filter == 4">
                            <view v-if="orderInfo.pinzhuangtai === 1">
                                <span @click.stop="exchange(orderInfo.ordernumber)">{{ $t('退款') }}</span>
                            </view>
                            <view v-if="orderInfo.pinzhuangtai !== 1">
                                <view v-if="item2.th_status == 0 || item2.th_status == 8">
                                    <view v-if="orderInfo.fh_status == 1 ">
											<span
                              @click.stop="getnav(`/pagesC/order/refundType?order_num=${orderInfo.ordernumber}&orgoods_id=${item2.id}`)">{{ $t('退换') }}</span>
                                    </view>
                                </view>

                                <view v-else-if="item2.th_status != 0">
										<span
                            @click.stop="getnav(`/pagesC/order/refundCopy?th_order_id=${item2.th_order_id}`)">
											<text v-if="item2.th_status == 1 || item2.th_status== 2">{{ $t('退款中') }}</text>
											<text v-else-if="item2.th_status == 3">{{ $t('商家拒绝申请') }}</text>
											<text v-else-if="item2.th_status == 4">{{ $t('退款完成') }}</text>
											<text v-else-if="item2.th_status == 5 || item2.th_status == 6">{{ $t('换货中') }}</text>
											<text v-else-if="item2.th_status == 7">{{ $t('商家拒绝申请') }}</text>
										</span>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="or_number" style="flex-direction: inherit;display: flex;justify-content: flex-end;">
                <!-- <view class="number_text">
                              实付金额:<text>¥{{orderInfo.goods_price}}</text> <i class="iconfont order_all_right"></i>
                </view>-->
				<view class="number_sure">
					<u-button class="u-m-l-20" shape="circle" plain size="mini" @click="chat">
					    {{ $t('客服') }}
					</u-button>
				</view>
                <view class="number_sure" v-if="orderInfo.filter == 1">

                    <u-button class="u-m-l-20" shape="circle" plain size="mini" @click="cancellation">
                        {{ $t('取消订单') }}
                    </u-button>
                    <u-button class="u-m-l-20" shape="circle" type="warning" plain size="mini"
                              @click="getpay(orderInfo.ordernumber)">{{ $t('付款') }}
                    </u-button>
                </view>
                <!-- <view class="number_sure" v-if="orderInfo.filter == 3">

                              <span class="payment_order"  @click="getqrshouhuo">确认收货</span>
                </view>-->
            </view>
        </view>

        <view class="order_list order-list-info u-p-t-10">
            <view>
                <text>{{ $t('支付方式') }}</text>
                <text class="color">{{ orderInfo.paytype }}</text>
            </view>
            <view>
                <text>{{ $t('商品价格') }}</text>
                <text class="color">¥ {{ orderInfo.goods_price }}</text>

            </view>
            <view>
                <text>{{ $t('物流公司') }}</text>
                <text class="color">{{ orderInfo.logistics }}</text>
            </view>
            <view>
                <text>{{ $t('物流单号') }}</text>
                <text class="color">{{ orderInfo.logistics_no }}</text>
            </view>
            <view>
                <text>{{ $t('运费') }}</text>
                <text class="color">¥ {{ orderInfo.freight }}</text>

            </view>

            <view>
                <text>{{ $t('优惠券') }}</text>
                <text class="color">-¥ {{ orderInfo.youhui_price }}</text>

            </view>
            <view>
                <text>{{ $t('优惠信息') }}</text>
                <text class="color">{{ orderInfo.coupon_str }}</text>
            </view>
			<view>
			    <text>{{ $t('备注信息') }}</text>
				<view class="bzxx">
					<text class="color2">{{ orderInfo.beizhu }}</text>
				</view>
			</view>
            <view class="order-name">
                <text>{{ $t('应付金额') }}</text>
                <text class="color">¥ {{ orderInfo.total_price }}</text>
            </view>
        </view>

        <view class="order_list order-list-info u-m-t-20 u-p-t-10 u-p-b-10" v-if="orderInfo.check_order_sn">
            <view>
                <text>{{ $t('核销码') }}</text>
                <text class="color">{{ orderInfo.check_order_sn }}</text>
            </view>
            <view @click="showErCodeOpen">
                <text>{{ $t('核销二维码') }}</text>
                <text class="color">显示二维码</text>
            </view>
        </view>

        <view class="order_list order-list-info u-m-t-20 u-m-b-60 u-p-t-10 u-p-b-10">
            <view>
                <text>{{ $t('订单号') }}:</text>
                <text class="color">{{ orderInfo.ordernumber }}</text>
            </view>
            <view>
                <text>{{ $t('交易编号') }}:</text>
                <text class="color">{{ orderInfo.order_number }}</text>
            </view>
            <view>
                <text>{{ $t('创建时间') }}</text>
                <text class="color">{{ orderInfo.addtime }}</text>
            </view>
            <view v-if="orderInfo.filter == 2 || orderInfo.filter == 3 || orderInfo.filter == 4">
                <text>{{ $t('创建时间') }}</text>
                <text class="color">{{ orderInfo.pay_time }}</text>
            </view>
            <view v-if="orderInfo.filter == 3 || orderInfo.filter == 4">
                <text>{{ $t('发货时间') }}</text>
                <text class="color">{{ orderInfo.fh_time }}</text>
            </view>
            <view v-if="orderInfo.filter == 4">
                <text>{{ $t('收货时间') }}</text>
                <text class="color">{{ orderInfo.coll_time }}</text>
            </view>
        </view>

        <pay-pop ref="payPop" :totalPrice="orderInfo.total_price" :integral="orderInfo.integral">
            <div class="pay-btn" @click="$u.throttle(crosspay,1500)">{{ $t('确认支付') }}</div>
        </pay-pop>

        <u-popup ref="popupCopun" mode="bottom" border-radius="12">
            <view class="popup-coupon">
                <view class="popup-title">{{ $t('店铺自提点') }}</view>
                <view class="coupon-list">
                    <view class="guarantee" v-for="(value,index) in shopStore" :key="index">
                        <image/>
                        <view class="guar-cont">
                            <view>{{ value.province }}{{ value.city }}{{ value.area }}</view>
                            <view style="color:#999;margin-top:10rpx;">{{ value.address_detail }}</view>
                            <view style="color:#999;margin-top:10rpx;">
                                营业时间:{{ value.work_start_time }}-{{ value.work_end_time }}
                            </view>
                            <view style="color:#999;margin-top:10rpx;">联系人:{{ value.contact }}
                                电话:{{ value.phone }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="popup-com">
                    <button @click="self_order_close">{{ $t('关闭') }}</button>
                </view>
            </view>
        </u-popup>

        <u-popup ref="weiCode" mode="bottom" border-radius="12">
            <view class="popup-coupon">
                <view class="weierCode">
                    <uqrcode ref="uQRCode" mode="view" :text="orderInfo.check_order_sn" :size="200"/>
                </view>

                <view class="popup-com">
                    <button @click="showErCodeClose">{{ $t('关闭') }}</button>
                </view>
            </view>
        </u-popup>
		
		<ad-mask ref="adMask"></ad-mask>

    </view>
</view>
</template>

<script>
let order_num = "",
	is_box = 0, //盲盒标识
    payOrderNumer; // 订单编号
let page = 1; // 页码
let providerList = []; // 支付通道
let orderInfoData = {};

let backindex = "";
import payPop from "@/pagesC/components/payPop";
import adMask from "../../components/adMask";

export default {
    components: {
        payPop,
		adMask
    },
    data() {
        return {
            imgSTATICURL: this.STATICURL,
            wechatMiniProgram: 0,
            h5: 0,
            orderInfo: {}, // 订单详情
            valShow: false,
            valueStatus: 0, // 更新页面状态 防止页面卡死
            shopStore: [
                {id: 1, name: 'aa'}
            ],
        }
    },
    onShow() {
        this.getMyorderinfo();
    },
    onLoad(option) {
        order_num = option.order_num;
        backindex = option.backindex;
        is_box = option.is_box;
        //#ifdef MP-WEIXIN
        this.wechatMiniProgram = 1;
        //#endif
        //#ifdef H5
        this.h5 = 1;
        //#endif

        uni.setNavigationBarTitle({
            title: this.$t('订单详情')
        });
		
		this.blindBox();
    },
	 onUnload() {
		 //uniapp的onBackPress生命周期是不支持微信小程序的
		//#ifdef MP-WEIXIN
		if(backindex == 2 && this.wechatMiniProgram == 1){
			wx.reLaunch({
				url: '/pages/tabBar/cart'
			})
		}
		//#endif
	},

    onBackPress() {
        if (backindex == 2) {
            uni.switchTab({
                url: "/pages/tabBar/cart"
            });
            return true;
        }
    },

    watch: {
        valShow() {
            this.statusMath(this);
        }
    },
    methods: {
        copyAddress() {
            const {province, city, area, detail} = this.orderInfo.shop_storestaff_info;
            let data = `${province}${city}${area}${detail}`;
            uni.setClipboardData({
                data,
                success: function () {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none'
                    })
                    console.log('复制成功');
                }
            })
        },
        exchange(ordernum) {
            console.log(ordernum);
            this.$Dialog
                .confirm({
                    message: this.$t('确认退款吗') + "？"
                })
                .then(() => {
                    this.$loading();
                    this.$http
                        .exchange({
                            order_num: ordernum
                        })
                        .then(res => {
                            if (res.status === 200) {
                                this.$toast(res.mess);
                            }
                        });
                });
        },
        getbacktel() {
            if (backindex == 2) {
                uni.switchTab({
                    url: "/pages/tabBar/cart"
                });
            } else {
                this.getback();
            }
        },

        getMyorderinfo() {
            this.$loading();
            this.$http.getMyorderinfo({
                order_num
            }).then(res => {
                if (res.status == 200) {
                    this.orderInfo = res.data;
                    console.log(this.orderInfo);
                }
            });
        },
        /**
         * 取消订单
         */
        cancellation() {
            this.$showModal({
                content: this.$t('确认删除订单') + '?'
            }).then(res => {
                if (res.confirm) {
                    this.$loading();
                    this.$http.getMyOrderquxiao({
                        order_num
                    }).then(res => {
                        if (res.status == 200) {
                            this.$toast(res.mess);
                            this.getback();
                        }
                    });
                }
            });
        },
        /**
         * 获取支付订单数据
         */
        getOrderInfo(typeIndex = 2, numarr) {

            let dataType = {
                zf_type: typeIndex,
                order_nums: numarr,
            };
            return new Promise(reslove => {
                this.$http.getzhifuorder(dataType).then(res => {
                    if (res.status == 200) {
                        reslove(res);
                    } else {
                        this.$toast(res.mess);
                    }
                });
            });
        },
        /**
         * 支付
         */
        async getpay(ordernumber) {

            payOrderNumer = ordernumber
            this.$refs.payPop.payModel = true;
        },
        // 生成拉起支付的密钥
        payFall(paydata, zf_type) {
            let data = {
                order_number: paydata.data.order_number,
                zf_type: zf_type,
                wechat_miniprogram: this.wechatMiniProgram,
                h5: this.h5
            }
            if (this.wechatMiniProgram === 1) {
                data.xcx_openid = uni.getStorageSync('xcxOpenid')
            }
            return new Promise(resolve => {
                this.$http.getzhifu(data)
                    .then(res2 => {
                        console.log(res2)
                        if (res2.status == 200) {
                            resolve(res2);
                        }
                    });
            });
        },

        async crosspay() {
            let ref = this.$refs.payPop
            orderInfoData = await this.getOrderInfo(ref.payType, payOrderNumer);
            if (parseFloat(ref.totalPrice) == 0 && ref.integral > 0) {
                ref.payType = 4
            }

            if (ref.payType == 5) { // 银行卡支付
                ref.orderNumber = orderInfoData.data.order_number
                ref.bankModel = true
                return
            } else if (ref.payType == 3 || ref.payType == 4) { // 余额支付
                ref.orderNumber = orderInfoData.data.order_number
                ref.hasPayPwd()
            } else { // 支付宝、微信支付
                const temp = await this.payFall(orderInfoData, ref.payType);
                ref.payinfos = await temp.data.infos
                console.log(ref.payinfos)
                ref.crosspay()
            }

            this.$hideLoading()
        },
        /**
         *
         */
        hidePopup() {
            this.$refs.popupRef.show();

        },

        hideAl(bal) {
            this.valShow = false;
        },

        self_order() {
            this.$http.getShopStore({
                shop_id: this.orderInfo.shop_id
            }).then(res => {
                if (res.status == 200) {
                    this.shopStore = res.data;
                }
            });
            this.$refs.popupCopun.open();
        },

        self_order_close() {
            this.$refs.popupCopun.close(); // 关闭
        },

        //显示二维码信息
        showErCodeOpen() {
            this.$refs.weiCode.open();
            this.$nextTick(() => {
                console.log('显示信息')
                this.$refs.uQRCode.reload();
            });
        },

        //关闭二维码信息
        showErCodeClose() {
            this.$refs.weiCode.close(); // 关闭
        },
		chat() {
			if (!uni.getStorageSync('token')) {
				// #ifdef MP-WEIXIN
				uni.switchTab({
					url: '/pages/tabBar/my'
				});
				// #endif
				// #ifndef MP-WEIXIN
				this.$u.route('/pagesB/login/login')
				// #endif
		
				return false
			}
			
			this.$u.route('/pagesB/message/chat',{
				toId : this.orderInfo.shop_token,
				orderId : this.orderInfo.id,
				isOrder: true,
				order_num: order_num
			})
		},
		async blindBox() {
			console.log("is_box："+is_box);
			const data = await this.getAdShareData();
			// 首次支付成功且抽中盲盒奖励时弹框 
			if(data.blind_box == 1 && is_box == 1){
				const mask = this.$refs['adMask']
				mask.shareImg = await data.blind_img; //分享图片
				mask.shareModel = true //分享弹窗打开
				// #ifdef MP-WEIXIN
				return false;
				// #endif
			}
		},
		// 获取盲盒数据
		getAdShareData() {
			return new Promise((resolve, reject) => {
				this.$http.getAdShareData({
					order_num: order_num
				}).then(res => {
					if (res.status === 200) {
						resolve(res.data)
					} else {
						reject(res)
					}
				})
		
			})
		},
    }
};
</script>

<style lang="scss" scoped>
@import '~uview-ui/index.scss';

.shou_sure {
  span {
    display: block;
    // width: 100upx;
    height: 40upx;
    padding: 0 20upx;
    line-height: 40upx;
    border-radius: 20upx;
    border: 1upx solid #999;
    color: #999;
    text-align: center;
    font-size: 24upx;
  }
}

.order-list-info {
  > view {
    margin: 10upx 0;

    text:nth-child(2) {
      display: block;
      flex: 1;
      text-align: left;
    }

    text:nth-child(1) {
      display: block;
      width: 30%;
      text-align: left;
    }
  }
}

.self_info {
  background-color: #FFFFFF;

  .self_title {
    font-size: 24upx;
    color: #999999;
    padding: 4upx 30upx;
    height: 60upx;
    line-height: 60upx;
  }

  .self_userinfo {
    padding: 4upx 30upx;

    .self_username {
      height: 80upx;
      line-height: 80upx;

      text {
        padding-left: 20upx;
      }
    }
  }
}

.self_order_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20upx 30upx;

  .self_juan {
    display: flex;

    text {
      font-size: 28rpx;
      color: #303133;

      &:nth-child(1) {
        font-weight: 500;
      }
    ;

      &:nth-child(2),
      &:nth-child(3) {
        color: #606266;
      }
    }

    .color {
      color: #f44336;
    }
  }

  .order_color {
    font-size: 26rpx;
    color: #333;
  }
}

.weierCode {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 150upx;
}

.bzxx {
	width: 70%;
	display: flex; /* 使用flex布局 */
	flex-direction: row; /* 设置为水平方向 */
	align-items: center; /* 垂直居中 */
	justify-content: flex-start; /* 水平左对齐 */
	white-space: nowrap; /* 不允许自动换行 */
}

.color2 {
  flex: 1; /* 占据所有可用空间 */
    white-space: pre-wrap; /* 允许文本换行 */
    word-break: break-word; /* 在单词边界处换行 */
}
</style>
